<script setup lang="ts">
// import JsBarcode from 'jsbarcode'
import { onMounted, ref } from 'vue'
import { Refresh, Search, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Sort } from '@element-plus/icons-vue'
import FormMenuSort from '@/components/form/FormMenuSort.vue'
import FormMenu from '@/components/form/FormMenu.vue'
import { typeAll, typeDelete, typeSave, batchUpdate } from '@/api/interface/web/type'
// import { dictionaryAll } from '@/api/interface/common/dictionary'

const fullscreenLoading = ref(false)

const searchForm = ref<any>({})

const handleSearch = () => {
  getLists()
}

const handleResetSearch = () => {
  searchForm.value = {}
  getLists()
}

// 获取列表
const loading = ref(false)
const tableData = ref<any[]>([])

const getLists = async () => {
  loading.value = true
  typeAll(searchForm.value)
    .then((res: any) => {
      tableData.value = res.map((v: any) => {
        return {
          ...v,
        }
      })
    })
    .finally(() => {
      loading.value = false
    })
}

// const dictionarys: any = ref([])
// const dictionaryAllFun = () => {
//   return new Promise((resolve: any) => {
//     dictionaryAll({ type: '1' }).then((res: any) => {
//       dictionarys.value = res
//       resolve(res)
//     })
//   })
// }

const initFun = async () => {
  getLists()
  //   await dictionaryAllFun()
  //   getLists()
  // const barcodeRef = ref(null)
  // const text = '6900000000001'
  // const options = {
  //   // format: 'EAN13', // 格式
  //   height: 50,
  //   // text: "覆盖显示的文本",
  //   fontSize: 16,
  //   // background: '#ccc',
  //   lineColor: 'black',
}

onMounted(() => {
  initFun()
  // JsBarcode(barcodeRef.value, text, options)
})

const dialogSortVisible = ref(false)
const sortData = ref<any[]>([])
const sortRef = ref()

const handleSort = () => {
  dialogSortVisible.value = true
  sortData.value = tableData.value.map((item: any, index: number) => {
    return {
      id: item.id,
      name: item.name,
      sort: index,
    }
  })
}

const handleSortChildren = (row: any) => {
  dialogSortVisible.value = true
  sortData.value = row.children.map((item: any, index: number) => {
    return {
      id: item.id,
      name: item.name,
      sort: index,
    }
  })
}

const handleDialogSortSubmit = () => {
  fullscreenLoading.value = true
  const list = sortRef.value.getSortResult()
  batchUpdate(list)
    .then(() => {
      dialogSortVisible.value = false
      ElMessage({
        type: 'success',
        message: '处理成功',
      })
      getLists()
    })
    .finally(() => {
      fullscreenLoading.value = false
    })
}

const handleDialogSortClose = () => {
  dialogSortVisible.value = false
}

const dialogFormVisible = ref(false)
const addEditData = ref<any>(null)
const addEditStatus = ref('add')
const menuFormRef = ref()

const handleCreate = () => {
  dialogFormVisible.value = true
  addEditData.value = null
  addEditStatus.value = 'add'
}

const handleAddChild = (row: any) => {
  dialogFormVisible.value = true
  addEditData.value = { parentId: row.id }
  addEditStatus.value = 'add'
}

const handleEdit = (row: any) => {
  dialogFormVisible.value = true
  addEditData.value = row
  addEditStatus.value = 'edit'
}

const handleDialogFormSubmit = () => {
  menuFormRef.value.submitForm().then((data: any) => {
    if (data) {
      fullscreenLoading.value = true
      if (addEditStatus.value === 'add') {
        typeSave(data)
          .then(() => {
            dialogFormVisible.value = false
            ElMessage({
              type: 'success',
              message: '新增成功',
            })
            getLists()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      } else {
        typeSave(data)
          .then(() => {
            dialogFormVisible.value = false
            ElMessage({
              type: 'success',
              message: '更新成功',
            })
            getLists()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      }
    }
  })
}

const handleDialogFormClose = () => {
  dialogFormVisible.value = false
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除节点?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    autofocus: false,
  }).then(() => {
    fullscreenLoading.value = true
    typeDelete({ id: row.id })
      .then(() => {
        ElMessage({
          message: '删除成功!',
          type: 'success',
        })
        getLists()
      })
      .finally(() => {
        fullscreenLoading.value = false
      })
  })
}
</script>

<template>
  <BasePageWrapper v-loading.fullscreen="fullscreenLoading">
    <BasePage>
      <template #title>类目管理</template>
      <template #toolbar>
        <el-button type="primary" @click="handleSort">
          <template #icon>
            <el-icon><Sort /></el-icon>
          </template>
          排序
        </el-button>
        <el-button type="primary" @click="handleCreate">
          <template #icon>
            <el-icon><Plus /></el-icon>
          </template>
          新增
        </el-button>
      </template>
      <template #searchbar>
        <el-form :inline="true" :model="searchForm" @submit.prevent>
          <el-form-item label="分类名称：">
            <el-input v-model="searchForm.name" placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="info" text bg @click="handleResetSearch">
              <template #icon>
                <el-icon><Refresh /></el-icon>
              </template>
              重置
            </el-button>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <el-icon><Search /></el-icon>
              </template>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        row-key="id"
        default-expand-all
        class="custom-table"
        style="width: 100%"
        height="98%"
      >
        <el-table-column prop="name" label="名称" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              v-if="!scope.row.parentId"
              type="primary"
              link
              @click="handleAddChild(scope.row)"
              >添加子分类</el-button
            >
            <el-button
              v-if="scope.row.children && scope.row.children.length"
              type="primary"
              link
              @click="handleSortChildren(scope.row)"
              >排序子分类</el-button
            >
            <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </BasePage>
  </BasePageWrapper>
  <BaseDialog v-model="dialogSortVisible">
    <template #title>菜单排序</template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogSortClose">取消</el-button>
      <el-button type="primary" @click="handleDialogSortSubmit">确认</el-button>
    </template>
    <FormMenuSort ref="sortRef" :data="sortData"></FormMenuSort>
  </BaseDialog>
  <BaseDialog v-model="dialogFormVisible" style="width: 30%">
    <template #title>{{ addEditStatus === 'add' ? '新增' : '编辑' }}</template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogFormClose">取消</el-button>
      <el-button type="primary" @click="handleDialogFormSubmit">确认</el-button>
    </template>
    <FormMenu ref="menuFormRef" :data="addEditData" :status="addEditStatus"></FormMenu>
  </BaseDialog>
  <svg ref="barcodeRef"></svg>
</template>

<style lang="scss" scoped></style>
